<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./src/css/layui.css">
	</head>
	<body>
		<div class="demoTable">
		  搜索商品名字：
		  <div class="layui-inline">
		    <input class="layui-input" name="id" id="demoReload" autocomplete="off">
		  </div>
		  <button class="layui-btn" data-type="reload">搜索</button>
		  搜索卖家姓名：
		  <div class="layui-inline">
		    <input class="layui-input" name="id" id="demoReload" autocomplete="off">
		  </div>
		  <button class="layui-btn" data-type="reload">搜索</button>
		  <div class="layui-inline">
		                  <input type="text" id="createTimeStart" class="layui-input userName"
		                         name="createTimeStart" placeholder="操作时间(开始)" value="">
		              </div>
		              <div class="layui-inline">
		                  <input type="text" id="createTimeEnd" class="layui-input userName"
		                         name="createTimeEnd" placeholder="操作时间(结束)" value="">
		              </div>
		              <a class="layui-btn search_btn" lay-submit="" data-type="search" lay-filter="search">查询</a>
		</div>
		<table id="auction_goods" lay-filter="auction_goods"></table>
		<script type="text/html" id="barEdit">
		        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		<script type="text/html" id="isAuction">
			 
			    
			    <div style="margin-left: 10PX;" class="layui-input-block">
			      <input type="checkbox"lay-filter="switchTest" name="close" lay-skin="switch" lay-text="是|否">
			    </div>
			 
			
		</script>
		<script src="./src/layui.js"></script>
		<script>
			layui.use(['table','form','jquery','layer','laypage','laytpl','laydate'],function () {
			    var table=layui.table,
					form=layui.form,
			        $=layui.jquery,
			        laypage=layui.laypage,
			        layer=layui.layer,
			        laytpl=layui.laytpl,
					laydate=layui.laydate;
			    table.render({
			        id:"auction_goodsId",
			        elem:'#auction_goods',
			        cellMinWidth: 80,
			        url:'./拍卖模块数据.json',
			        page:true,
			        limit:10,
			        limits:[10,20,30],
			        //开启工具栏
			        toolbar:true,
			        cols:[
			            [
			                {type:'checkbox'},//开启复选框
			                {title:'商品序号',field:'id',sort:'true'},
							{title:'商品名字',field:'id'},
							{title:'商品类型',field:'birthday'},
							{title:'商品价格',field:'birthday'},
							{title:'商品描述',field:'email',sort:'true'},
							{title:'商品库存',field:'email',sort:'true'},
			                {title:'卖方姓名',field:'fullname',sort:'true'},
			                
			                {title:'是否拍卖',field:'sex',templet:'#isAuction'},
			                {title:'商品状态',field:'address',sort:'true'},
							{title:'上传时间',field:'id',sort:'true'},
			                {title:'更新时间',field:'roleName'},
							{title:'操作',templet:'#barEdit'}
			            ]
			        ],
			        //处理从服务器端传过来的数据
			        parseData:function (result) {
			            return {
			                code: result.code == 200 ? 0 : result.code(),
			                msg: result.message,
			                data: result.data.list,
			                count: result.data.total
			            }
			        }
			    });
				
			form.on('switch(switchTest)', function(data){
			  console.log(data.elem); //得到checkbox原始DOM对象
			  console.log(data.elem.checked); //开关是否开启，true或者false
			  console.log(data.value); //开关value值，也可以通过data.elem.value得到
			  console.log(data.othis); //得到美化后的DOM对象
			   layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
			        offset: '6px'
			      });
			      layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
			});  
				// 这里的auction_goods是table的lay-fileter
				table.on('tool(auction_goods)',function(row){
					var event=row.event,
					data=row.data;
					if(event==='edit'){
						layer.open({
							type:2,
							title:'商品信息编辑',
							area:['450PX','560PX'],
							content:'商品修改页面.html'
						});
					}else if(event==='del'){
						layer.confirm('确定删除吗?',function(index){
							$.ajax({
								type:'delete',
								dataType:'json',
								url:'',
								success:function(result){
									if(result.code==200){
										layer.msg('删除成功',{icon:1},function(){
											parent.location.reload();
										})
									}else{
										layer.msg(result.message,{icon:5})
									}
								}
								
								
							})
							
							
						})
					}
				})
				//日期选择模块js
				var start = laydate.render({
				                elem:'#createTimeStart',
				                max:'new Date()',
				                type:'date',
				                trigger:'click',
				                done:function (value,date) {
				                    end.config.min = date;
				                    end.config.min.month=date.month-1;
				                }
				            })
				
				            var end = laydate.render({
				                elem:'#createTimeEnd',
				                max:'new Date()',
				                type:'date',
				                trigger:'click',
				                done:function (value,date) {
				                    start.config.max = date;
				                    start.config.max.month = date.month-1;
				                }
				            })
					//日期搜索模块js '这里为table的js里的id'
					$(".search_btn").click(function () {
					            table.reload('logList',{
					                page:1,
					                where:{
					                    operate:$("#operation").val(),
					                    begin:$("#createTimeStart").val(),
					                    end:$("#createTimeEnd").val()
					                },
					                parseData:function (result) {
					                    return {
					                        count:result.data.total,
					                        msg:result.message,
					                        data:result.data.list,
					                        code:result.code==200?0:result.code
					                    }
					                }
					            })
					
					        });
				
				})
		</script>
	</body>
</html>
